<template>
  <div>
    <BasicTable @register="registerTable" class="with-more-input">
      <template #form-profitListMonitor>
        <Button type="primary" @click="handleMonitoring()" class="mr-2">{{
          $t('table.risk.report_monitor_data')
        }}</Button>
      </template>
      <template #form-usernameSlot>
        <a-input-group compact style="display: flex; width: 380px" class="t-form-label-com">
          <Select style="width: 50%" v-model:value="currentType" class="br-none">
            <SelectOption value="username">{{ $t('business.common_member_account') }}</SelectOption>
            <SelectOption value="parent_name">{{ $t('business.common_super_agent') }}</SelectOption>
          </Select>
          <Input
            style="width: 50%; margin-right: 10px"
            allowClear
            :placeholder="$t('common.inputText')"
            v-model:value="fromSearch"
          />
        </a-input-group>
      </template>
      <template #tableTitle>
        <template v-if="currentList.length > 0">
          <cdButtonCurrency
            :btn-list="currentList?.map((item) => ({ name: item.name, value: item.id }))"
            @click="changeClick"
            v-model="currency_id"
            :firstList="[{ name: t('table.member.member_money_all'), value: '', lable: 'ALL' }]"
          />
        </template>
      </template>
      <template #action="{ record }">
        <span class="primary-color cursor p1" @click="informationOpen(record)">{{
          t('business.common_detail')
        }}</span>
        <span class="primary-color cursor p1" @click="deletFun(record)"
          >{{ t('business.common_delete_b') }}
        </span>
      </template>
      <template #form-startDate="{ model, field }">
        <DatePicker
          v-model:value="model[field]"
          :disabledDate="disabledStartDate"
          @change="onStartDateChange"
        />
      </template>
      <template #form-endDate="{ model, field }">
        <DatePicker
          v-model:value="model[field]"
          :disabledDate="disabledEndDate"
          @change="onEndDateChange"
        />
      </template>
      <template #currency="{ record }">
        <cdIconCurrency :icon="setCurrencyName(record?.currency_id)" class="w-20px mr-3px" />
        <span>{{ setCurrencyName(record?.currency_id) }}</span>
      </template>
    </BasicTable>
    <ParameterMonitoringModal @register="registerMonitoringModal" />
    <ShowInfo @register="registerInfor" />
  </div>
</template>
<script lang="ts" setup>
  import { nextTick, ref } from 'vue';
  import { type Recordable } from '@vben/types';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchForm } from './index.data';
  import { useModal } from '/@/components/Modal';
  import {
    InputGroup,
    Select,
    SelectOption,
    DatePicker,
    Input,
    message,
    RadioGroup,
    RadioButton,
  } from 'ant-design-vue';
  import { Button } from '/@/components/Button/index';
  import ParameterMonitoringModal from '../../../common/components/parameterMonitoringModal.vue';
  import { openConfirm } from '/@/utils/confirm';
  import { getHighList } from '/@/api/risk';
  import { ShowInfo } from '/@/components/ShowInfo/index';
  import dayjs from 'dayjs';
  import {
    setDateParmas,
    setStartformatDate,
    setEndformatDate,
    updateButtonDay,
  } from '/@/utils/dateUtil';
  import { updateHighList } from '/@/api/risk/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useTreeListStore } from '/@/store/modules/treeList';
  import cdIconCurrency from '/@/components-cd/Icon/currency/cd-icon-currency.vue';
  import cdButtonCurrency from '/@/components-cd/button/cd-button-currency.vue';

  const { t } = useI18n();
  interface FormModel {
    start_time: Date | null;
    end_time: Date | null;
  }
  const model = ref<FormModel>({
    start_time: dayjs().startOf('day'),
    end_time: dayjs().endOf('day'),
  });

  const currency_id = ref('' as string);
  const currentType = ref('username' as string);
  const fromSearch = ref('' as string);
  const { currencyTreeList } = useTreeListStore();
  const currentArr = ref([...currencyTreeList] as any);
  // const currentList = ref([{ value: '', label: t('table.member.member_currency') }] as any);
  const currentList = ref([] as any);
  const [registerMonitoringModal, { openModal }] = useModal();
  const [registerInfor, { openModal: Infor }] = useModal();
  const [registerTable, { reload, getForm, getRawDataSource }] = useTable({
    api: getHighList,
    columns,
    useSearchForm: true,
    bordered: true,
    showIndexColumn: false,
    formConfig: {
      labelWidth: 120,
      schemas: searchForm,
      showAdvancedButton: false,
      actionColOptions: {
        class: 't-form-col t-form-label-com',
        span: 1,
      },
      submitButtonOptions: {
        text: t('business.common_inquire'), //查询
      },
      showResetButton: false,
    },
    beforeFetch: (params) => {
      params[currentType.value] = fromSearch.value;
      params['currency_id'] = currency_id.value;
      //setDateParmas(params);
      if (params?.time?.length > 0) {
        params.start_time = params.time[0] ? setStartformatDate(params.time[0]) : null;
        params.end_time = params.time[1] ? setEndformatDate(params.time[1]) : null;
      }
      delete params.time;
      return params;
    },
    afterFetch: () => {
      //currentList.value = [{ value: '', label: t('table.member.member_currency') }];
      currentList.value = [];
      let rawDataSource = getRawDataSource();
      if (rawDataSource.n) {
        rawDataSource.n.map((item) => {
          currencyTreeList.map((crrrencyItem) => {
            if (crrrencyItem.id == item.currency_id) currentList.value.push(crrrencyItem);
          });
        });
      }
    },
  });

  nextTick(async () => {
    let time_ = await updateButtonDay('days');
    // console.log(111, '返回', time_);
    await getForm().setFieldsValue({ time: time_ });
    reload();
  });

  const disabledStartDate = (date) => {
    let end_time: any = null;
    if (dayjs(model.value.end_time).valueOf()) {
      end_time = model.value.end_time.valueOf();
    } else {
      end_time = dayjs().endOf('days').valueOf();
    }
    return date.valueOf() > end_time;
  };

  const disabledEndDate = (date) => {
    return (
      date.valueOf() > dayjs().endOf('days').valueOf() ||
      date.valueOf() <= dayjs(model.value.start_time).valueOf()
    );
  };
  const onStartDateChange = (value) => {
    model.value.start_time = value;
  };

  const onEndDateChange = (value) => {
    model.value.end_time = dayjs(value).endOf('days');
  };

  function handleMonitoring() {
    openModal(true, { risk_code: 'high_multiple_prizes' });
  }

  function changeClick(v) {
    reload();
  }

  function deletFun(record) {
    openConfirm(t('common.warning'), t('modalForm.risk.risk_delete_tip'), async () => {
      try {
        const { status, data } = await updateHighList({ id: record.id, limit_type: 4 });
        if (status) {
          message.success(data);
          reload();
        } else {
          message.error(data);
        }
      } catch (error) {
        console.log(error);
      } finally {
      }
    });
  }
  function informationOpen(record: Recordable): void {
    Infor(true, record);
  }
  function setCurrencyName(id) {
    let name = currentArr.value.filter((c) => c.id === id)[0].name;
    return name;
  }
</script>
<style lang="less" scoped>
  ::v-deep(.ant-table-wrapper .ant-table-title) {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .bg-white {
    margin: 0 !important;
  }
</style>
